<template>
	<view class="container">
		<view class="package-size">
			<text>快递大小</text>
			<view class="size-options">
				<view 
					class="size-item" 
					:class="{ active: formData.size === 'small' }"
					@click="formData.size = 'small'"
				>小件</view>
				<view 
					class="size-item" 
					:class="{ active: formData.size === 'medium' }"
					@click="formData.size = 'medium'"
				>中件</view>
				<view 
					class="size-item" 
					:class="{ active: formData.size === 'large' }"
					@click="formData.size = 'large'"
				>大件</view>
			</view>
		</view>
		
		<view class="form-item">
			<view class="label">收件地址:</view>
			<input 
				class="input" 
				v-model="formData.address"
				placeholder="x号楼-xxx号"
			/>
		</view>
		
		<view class="form-item">
			<view class="label">快递商家:</view>
			<input 
				class="input" 
				v-model="formData.courier"
				placeholder="选择快递点"
				@click="showCourierPicker = true"
			/>
		</view>
		
		<view class="form-item">
			<view class="label">取件信息:</view>
			<textarea 
				class="textarea" 
				v-model="formData.pickupInfo"
				placeholder="输入取件码"
			/>
		</view>
		
		<view class="form-item">
			<view class="label">备注信息:</view>
			<input 
				class="input" 
				v-model="formData.remark"
				placeholder="所有人可见"
			/>
		</view>
		
		<view class="more-options">
			<text>更多选择:</text>
			<text class="show-more" @click="toggleMore">
				{{ show ? '隐藏' : '显示' }}
			</text>
		</view>
		
		<view class="more-form" v-if="show">
			<view class="form-item">
				<view class="label">取货时间:</view>
				<input 
					class="input" 
					v-model="formData.pickupTime"
					placeholder="不限时段"
				/>
			</view>
			
			<view class="form-item">
				<view class="label">物品信息:</view>
				<input 
					class="input" 
					v-model="formData.itemInfo"
					placeholder="不限时段"
				/>
			</view>
			
			<view class="form-item">
				<view class="label">快递数量:</view>
				<input 
					class="input" 
					type="number"
					v-model="formData.quantity"
					placeholder="1个"
				/>
			</view>
			
			<view class="form-item switch-item">
				<view class="label">加急订单:</view>
				<switch 
					:checked="formData.isUrgent" 
					@change="handleUrgentChange"
					color="#007AFF"
				/>
			</view>
			
			<view class="form-item" v-if="formData.isUrgent">
				<view class="label">额外赏金:</view>
				<input 
					class="input" 
					type="number"
					v-model="formData.extraReward"
					placeholder="输入金额"
				/>
			</view>
			
			<view class="form-item switch-item">
				<view class="label">性别限制:</view>
				<switch 
					:checked="formData.genderLimit" 
					@change="handleGenderLimitChange"
					color="#007AFF"
				/>
			</view>
			
			<view class="form-item" v-if="formData.genderLimit">
				<view class="label">性别:</view>
				<radio-group v-model="formData.gender">
					<radio value="male">男</radio>
					<radio value="female">女</radio>
				</radio-group>
			</view>
		</view>
		
		<view class="tips">信息仅接单的同学可见，安全放心！</view>
		
		<view class="price-section">
			<text>需支付</text>
			<text class="amount">{{ totalPrice }}元</text>
		</view>
		
		<button class="submit-btn" type="primary" @click="submitForm">立即发布</button>
		
		<view class="terms">
			<text class="terms-link">免责声明 用户条款&隐私策略</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				formData: {
					size: 'small',
					address: '',
					courier: '',
					pickupInfo: '',
					remark: '',
					pickupTime: '',
					itemInfo: '',
					quantity: '1',
					isUrgent: false,
					extraReward: '',
					genderLimit: false,
					gender: ''
				},
				showCourierPicker: false
			}
		},
		computed: {
			totalPrice() {
				// 基础价格
				let basePrice = 0
				switch(this.formData.size) {
					case 'small':
						basePrice = 3
						break
					case 'medium':
						basePrice = 5
						break
					case 'large':
						basePrice = 8
						break
				}
				
				// 如果是加急订单，加上额外赏金
				const extraReward = this.formData.isUrgent ? Number(this.formData.extraReward) || 0 : 0
				
				return basePrice + extraReward
			}
		},
		methods: {
			toggleMore() {
				this.show = !this.show
			},
			handleUrgentChange(e) {
				this.formData.isUrgent = e.detail.value
				if (!this.formData.isUrgent) {
					this.formData.extraReward = ''
				}
			},
			handleGenderLimitChange(e) {
				this.formData.genderLimit = e.detail.value
				if (!this.formData.genderLimit) {
					this.formData.gender = ''
				}
			},
			submitForm() {
				console.log('提交表单:', this.formData)
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
	}
	.package-size {
		margin-bottom: 30rpx;
	}
	.size-options {
		display: flex;
		gap: 20rpx;
		margin-top: 10rpx;
	}
	.size-item {
		padding: 10rpx 30rpx;
		border: 1rpx solid #ddd;
		border-radius: 30rpx;
		font-size: 28rpx;
	}
	.size-item.active {
		background-color: #007AFF;
		color: #fff;
		border-color: #007AFF;
	}
	.form-item {
		margin-bottom: 20rpx;
	}
	.label {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		color: #333;
	}
	.input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
	.textarea {
		width: 100%;
		height: 200rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
	.more-options {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}
	.show-more {
		color: #007AFF;
		font-size: 28rpx;
	}
	.tips {
		color: #999;
		font-size: 24rpx;
		text-align: center;
		margin: 20rpx 0;
	}
	.price-section {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx 0;
		font-size: 28rpx;
	}
	.amount {
		color: #f00;
		margin-left: 10rpx;
	}
	.submit-btn {
		width: 90%;
		margin: 40rpx auto;
		background-color: #007AFF;
	}
	.terms {
		text-align: center;
		margin-top: 20rpx;
	}
	.terms-link {
		color: #666;
		font-size: 24rpx;
	}
	.more-form {
		background-color: #f8f8f8;
		padding: 20rpx;
		border-radius: 8rpx;
		margin-top: 10rpx;
	}
	.switch-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
